<template>
    <view>
      <view class="affirmPaly" v-if="!isPayState">
        <view class="inform-title">请确认支付是否已完成</view>
        <view class="btn-support btn-zoom" @click="queryAly">
          <view class="iconfont loading-animation" v-if="loadingState">&#xe891;</view>
          <view class="btn-name">确认</view>
        </view>
      </view>
      <view class="payStaue" v-else>
        <view class="phnone-img"><image :src="imgUrl"></image></view>
        <view class="payName">{{stateName}}</view>
        <view v-if="!cancelPay" style="text-align: center;color: #8c8c8c;margin-top:16rpx;font-size: 28rpx;">{{skipTime}}秒后跳转</view>
      </view>
    </view>
</template>

<script>
  import { pueryPay, buyClass } from '@/utils/api.js'
  export default{
    data() {
      return{
        parameter:'', // 地址参数
        loadingState: false, // 按钮状态
        BillNo:'', // 订单号
        isPayState: false,
        cancelPay: false, // ios取消支付
        audstate:false, // 判断是否是ios审核
        pathUrl: '/pages/add_account/addwx', // 默认跳转开通成功页面
        skipTime: 3, // 3秒后跳转 
        times:null,
        imgUrl: '', // 支付成功与失败的图片，成功https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_2.png----失败：https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_3.png
        stateName: '', // 支付结果名字
        fromPary: {
         phone:'',
         platform: '',
         ver: '' // 版本号
        },
      }
    },
    onLoad(params) {
      const vm = this
       if(window.location.href.split('?')[1]){
         vm.parameter = window.location.href.split('?')[1].toLowerCase()
       }
       if(vm.$auth.getUrlPrams("ver")){
         let versions = vm.$auth.getUrlPrams("ver")
         vm.fromPary.ver = versions.replace(/\./g,"")
       }
      if(params.billNo){
        if(params.audstate){
          vm.audstate = params.audstate
        }
        vm.BillNo = params.billNo
      }
      if(params.phoneNumber) {
        vm.fromPary.phone = params.phoneNumber
      }
      if(vm.$auth.getUrlPrams("platform")) {
        vm.fromPary.platform = vm.$auth.getUrlPrams("platform").toLowerCase()
        console.log('平台--',vm.fromPary.platform)
      }
      // let platform = params.platform.toLowerCase() // 转小写
      // if(platform == 'ios' || platform == 'android') {
      //   vm.fromPary.platform = platform
      // }
       vm.$wechat.unseBehavior()
    },
    methods:{
    /* 查询支付结果
      如果res.skuType == "ExperienceCourse"体验课支付成功，等于SystemCourse系统课支付成功
      存储的appPlayState为true说明是计划页进来的，取消支付的跳转要隐藏
      否则就查询购买课程后跳转
      isPayState查询按钮隐藏状态
      loadingState按钮转圈状态
     */  
     async queryAly() {
      const vm = this
      vm.loadingState = true
      const res = await pueryPay({BillNo:vm.BillNo})
       if (!res.isSuccess) {
         vm.stateName = "支付取消"
         vm.imgUrl = 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_3.png'
         if(uni.getStorageSync("appPlayState")){
           vm.cancelPay = true
         }else{
           // 取消如果是app里的h5通知app
           if(vm.fromPary.platform == 'ios'){
             vm.countDown(vm.fromPary.platform)
           } else if(vm.fromPary.platform == 'android'){
             if(vm.fromPary.ver){
               let ver = parseInt('0152')
               if(vm.fromPary.ver <= ver){
                  vm.queryCourse(vm.fromPary.phone)
               }else{
                  vm.countDown(vm.fromPary.platform)
               }
             }
           } else{
             vm.countDown(null,res.cancelRedirectUrl)
              // window.location.replace(res.cancelRedirectUrl)
           }
        }
       }else{
         vm.stateName = "支付成功"
         vm.imgUrl = 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/my/Binding_2.png'
         if(vm.fromPary.platform == 'ios' || vm.fromPary.platform == 'android'){
           vm.pathUrl = '/pages/add_account/addwx?'+vm.parameter
            vm.informFlish("paySuccess")
           // vm.pathUrl = '/pages/add_account/addwx?platform=' +vm.fromPary.platform+'&phoneNumber='+ vm.fromPary.phone
         }else{
           vm.pathUrl = '/pages/add_account/addwx?phoneNumber='+ vm.fromPary.phone
         }
         vm.countDown()
        }
        vm.isPayState = true
        vm.loadingState = false
      },
      // 查询购课
      queryCourse(phone) {
        const vm = this
        let skunameId = vm.$auth.getUrlPrams("skuid")
        let radid = vm.$auth.getUrlPrams("radid")
        let rsid = vm.$auth.getUrlPrams("rsid")
        let agentid = vm.$auth.getUrlPrams("agentid")
        let staff = vm.$auth.getUrlPrams("staff")
        buyClass(phone).then(res => {
          // 如果ownedYearedCourse系统课为true，买过年课，跳首页
          if(res.ownedYearedCourse) {
             vm.pathUrl = '/pages/home/index?phonenumber='+phone+'&platform='+vm.fromPary.platform+'&ver='+vm.fromPary.ver+'&skuid='+skunameId+'&radid='+radid+'&rsid='+rsid+'&agentid='+agentid+'&staff='+staff
          }else{
            // 什么都没买跳体验课
            if(!res.ownedExperienceCourse) {
              vm.pathUrl = '/pages/home/trialclass?pageNum='+1+'&phonenumber='+phone+'&platform='+vm.fromPary.platform+'&ver='+vm.fromPary.ver+'&skuid='+skunameId+'&radid='+radid+'&rsid='+rsid+'&agentid='+agentid+'&staff='+staff
            }
            // 如果ownedExperienceCourse体验课为true，ownedSystemCourse系统课为false，显示系统课
            if(res.ownedExperienceCourse) {
              let skuid = '4a77c1fd-bf3f-a9ab-365d-3a022c667994' // 年课skuid
              vm.pathUrl = '/pages/product/detail?phonenumber='+phone+'&platform='+vm.fromPary.platform+'&ver='+vm.fromPary.ver+'&skuid='+skuid+'&radid='+radid+'&rsid='+rsid+'&agentid='+agentid+'&staff='+staff
            }
          }
          vm.countDown()
        })
      },
      // 倒计时
      countDown(platform,pathUrl) {
        const vm = this
        let times = setInterval(() => {
          vm.skipTime = vm.skipTime - 1
          if (vm.skipTime === 0) {
            clearInterval(times)
            if(platform){
              vm.informFlish("loadMainUrl")
            }else if(pathUrl) {
              window.location.replace(pathUrl)
            }else{
              uni.navigateTo({
                url: vm.pathUrl
              })
            }
            vm.skipTime = 3
            vm.cancelPay = true
          }
        },1000)
      },
      //通知app刷新
      informFlish(type) {
        let ifr = document.getElementById("iframe");
         if(ifr){ document.body.removeChild(ifr)}
        ifr = document.createElement("iframe");
        let url = "uniwebview://"+type+"?type=0&method="+type                           
        ifr.setAttribute('src', url);  
        ifr.setAttribute('style', 'display:none'); 
        ifr.setAttribute('id','iframe');
        document.body.appendChild(ifr); 
      }
    }
  }
</script>

<style lang="scss" scoped>
  .affirmPaly{
    margin-top: 30%;
    text-align: center;
    .inform-title{
       padding: 40rpx 0 100rpx 0;
       font-size: 32rpx;
    }
    .btn-support{
      width: 230rpx;
      height: 80rpx;
      background: #FF800C;
      border-radius: 10rpx;
      font-weight: bold;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      margin: auto;
      .loading-animation{
        animation: load 1s linear infinite;
        -moz-animation:load 1s linear infinite;
        -webkit-animation: load 1s linear infinite;
        -o-animation:load 1s linear infinite;
        font-size: 30rpx;
      }
      @-webkit-keyframes load{
        from{-webkit-transform:rotate(0deg);}
        to{-webkit-transform:rotate(360deg);}
      }
      @-moz-keyframes load{
        from{-moz-transform:rotate(0deg);}
        to{-moz-transform:rotate(360deg);}
      }
      @-o-keyframes load{
        from{-o-transform:rotate(0deg);}
        to{-o-transform:rotate(360deg);}
      }
      .btn-name{
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
  .payStaue{
    margin-top: 30%;
   .phnone-img{
     width: 240rpx;
     height: 240rpx;
     margin: auto;
   }
   .payName{
     text-align: center;
     margin-top: 16rpx;
     font-weight: bold;
     font-size: 32rpx;
   }
  }
</style>

